<template>
  <div class="list">

    <div class="bookList" v-for="(v,i) in cartList" :key="i">
      <div class="img">
        <img :src="v.image" alt />
      </div>
      <div class="name">{{v.name}}</div>
      <div class="mask" v-if="v.checked"></div>
      <van-checkbox class="checkboxClass" v-model="v.checked" shape="square"></van-checkbox>
    </div>
    <div class="bookList item" v-for="(v,i) in itemList" :key="v.name">
      <div class="img" style='background:red;'>
      </div>
      <div class="name">{{v.name}}</div>
    </div>
    <FooterBar v-if='showBar' :checkList='checkList'></FooterBar>

  </div>
</template>

<script>
import { mapState } from "vuex";
import FooterBar from '../../components/footerBar/footerBar'
export default {
  data() {
    return {

    }
  },
  computed: {
    ...mapState(["cartList","itemList"]),
    showBar() {
      return this.cartList.find((v,i) => {
        return v.checked
      })
    },
    checkList() {
      return this.cartList.filter((v,i) => {
        return v.checked
      })
    }
  },
  components: {
    FooterBar
  }
};
</script>

<style lang='scss' scoped>
.list {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.bookList {
  width: 80px;
  border: 1px solid #ccc;
  margin: 10px;
  height: 120px;
  position: relative;
  .mask {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
  }
  .checkboxClass {
    z-index: 2;
    position: absolute;
    bottom: 0px;
    right: 0px;
  }
  .img {
    width: 80px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .name {
    line-height: 30px;
    font-size: 12px;
    text-align: center;
  }
}
</style>